<template>
	<view class="active-form form-container">
		<view class="form-box">
			<block v-for="(item, index) in formData" :key="item.id">
				<view class="form-item flex-row--c">
					<!-- 单行文本框 -->
					<view class="line" v-if="
                     item.type === 'text' ||
                     item.type === 'number' ||
                     item.type === 'code' || item.type === 'file'|| item.type === 'document'
                     ">
						<view v-if="item.type !== 'file'" :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
							<text class="colorRed" v-if="item.rules.verify">*</text>
							<text class="num" v-if="num">{{ index + 1 }}.</text>
							{{ item.label }}
						</view>
						<!-- 发送验证码 -->
						<view class="line-right flex-row-sb-c pr20" v-if="item.type === 'code'">
							<input type="text" class="input" :class="item.type === 'code' ? 'code-text' : ''"
								:disabled="item.disabled" placeholder-class="plaClass" :placeholder="item.placeholder"
								:placeholder-style="getPlaceholderStyle(item.type)" v-model="form[item.rules.name]"
								@input="inputVal(index)" />
							<view style="width:260rpx">
								<uv-button size="normal" type="primary" :disabled="item.disabled||isSend"
									@click="sendCode(item)" :hairline="true" >
									{{ codeFont }}
								</uv-button>
							</view>
						</view>

						<!-- 证件上传 -->
						<view class="line-right flex-row-sb-c pr20" v-else-if="item.type === 'document'">
							<input type="text" class="input" :class="item.type === 'document' ? 'code-text' : ''"
								:disabled="item.disabled" placeholder-class="plaClass" :placeholder="item.placeholder"
								:placeholder-style="getPlaceholderStyle(item.type)" v-model="form[item.rules.name]"
								@input="inputVal(index)" />
									<uv-icon name="zhaoxiangji" custom-prefix="custom-icon" size="24"
										color="#333333" @click="test(item)" top="-3"></uv-icon>
							</uv-button>
						</view>
						
						<!-- 数量加减 -->
						<view class="line-right" v-else-if="item.type === 'num'">
							<uv-icon name="minus-circle" size="24"
								:color="item.rules.value < 2 ? '#cfcfcf' : '#167fff'" @click="reduce(item)"></uv-icon>
							<input type="text" class="inputNum" :disabled="item.disabled" placeholder-class="plaClass"
								:placeholder="item.placeholder" v-model="form[item.rules.name]"
								@input="inputVal(index)" />
							<uv-icon name="plus-circle-fill" size="24" color="#167fff"
								@click="add(item)"></uv-icon>
						</view>

						<!-- 图片上传 -->
						<!-- <view class="line-right flex-row-sb-c pr20" v-else-if="item.type === 'file'">
							<input type="text" class="input" :class="item.type === 'file' ? 'code-text' : ''"
								:disabled="item.disabled" placeholder-class="plaClass" :placeholder="item.placeholder"
								:placeholder-style="getPlaceholderStyle(item.type)" v-model="form[item.rules.name]"
								@input="inputVal(index)" />
							<uv-upload :fileList="form[item.rules.name]" :disabled="item.disabled" :accept="item.accept"
								:capture="item.capture" :maxCount="item.maxCount" :sizeType="item.sizeType"
								:compressed="item.compressed" :camera="item.camera" :multiple="item.multiple"
								:maxSize="item.maxSize" :previewImage="item.previewImage" width="0rpx" height="0rpx"
								@afterRead="afterRead($event,item)" @delete="deletePic($event,item)"></uv-upload>
						</view> -->
						<!-- 普通输入框 -->
						<view class="line-right" v-else>
							<input type="text" class="input" :disabled="item.disabled" placeholder-class="plaClass"
								:placeholder="item.placeholder" v-model="form[item.rules.name]"
								@input="inputVal(index)" />
						</view>
					</view>
					<!-- 下拉选择-->
					<template v-else-if="item.type === 'select'">
						<view class="line" @click="showSelect(index)">
							<view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
								<text class="colorRed" v-if="item.rules.verify">*</text>
								<text class="num" v-if="num">{{ index + 1 }}.</text>
								{{ item.label }}
							</view>
							<view class="line-right pr20">
								<view class="input plaClass">
									<text>
										{{
                                            item.list.find(v => v.value === form[item.rules.name]) && item.list.find(v => v.value === form[item.rules.name]).name || ''
                                        }}
									</text>
									<text class="input-placeholder" v-if="!form[item.rules.name]">{{
                                            item.placeholder
                                        }}
									</text>
								</view>
							</view>
						</view>
						<uv-action-sheet :actions="item.list" :title="item.title" safeAreaInsetBottom round="8"
							:ref="`actionSheet${index}`" cancelText="取消" :show="item.show"
							@select="selectConfirm($event,item)" @close="selectClose(item)"></uv-action-sheet>
					</template>

					<block v-else-if="item.type === 'datetime'">
						<view class="line" @click="showDateSelect(index)">
							<view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
								<text class="colorRed" v-if="item.rules.verify">*</text>
								<text class="num" v-if="num">{{ index + 1 }}.</text>
								{{ item.label }}
							</view>
							<view class="line-right pr20">
								<view class="input plaClass">
									<text>{{ form[item.rules.name] }}</text>
									<text class="input-placeholder" v-if="!form[item.rules.name]">{{
                                            item.placeholder
                                        }}
									</text>
								</view>
							</view>
						</view>

						<uv-datetime-picker :show="item.show" :actions="item.list" :title="item.title" round="8"
							:ref="`datetime${index}`" :mode="item.mode||'date'"
							:maxDate="item.maxDate||new Date(new Date().getFullYear() + 10, 0, 1).getTime()"
							:minDate="item.minDate||new Date(new Date().getFullYear() - 10, 0, 1).getTime()"
							:minHour="item.minHour||0" :maxHour="item.maxHour||23" :minMinute="item.minMinute||0"
							:maxMinute="item.maxMinute||59" :itemHeight="item.itemHeight||44"
							:formatter="item.formatter" @confirm="selectDateTime($event,item)"
							@close="selectClose(item)" @cancel="selectClose(item)"></uv-datetime-picker>
					</block>

					<template v-else-if="item.type === 'calendar'">
						<view class="line" @click="showCalendar(index)">
							<view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
								<text class="colorRed" v-if="item.rules.verify">*</text>
								<text class="num" v-if="num">{{ index + 1 }}.</text>
								{{ item.label }}
							</view>
							<view class="line-right pr20">
								<view class="input plaClass">
									<text>{{ form[item.rules.name] }}</text>
									<text class="input-placeholder" v-if="!form[item.rules.name]">{{
                                            item.placeholder
                                        }}
									</text>
								</view>
							</view>
						</view>
						<uv-calendar :show="item.show" :title="item.title" :round="8" :mode="item.mode||'single'"
							:ref="`calendar${index}`" cancelText="取消" @confirm="selectCalendar($event,item)"
							@close="selectClose(item)" :defaultDate="item.defaultDate"></uv-calendar>
					</template>


					<!-- 多行文本框 -->
					<view class="textarea-box" v-else-if="item.type === 'textarea'">
						<view :class="item.rules.verify ? 'line-row' : 'p-l14 line-row'">
							<text class="colorRed" v-if="item.rules.verify">*</text>
							<text class="num" v-if="num">{{ index + 1 }}.</text>
							{{ item.label }}
						</view>
						<view class="line-bottom-textarea">
							<!-- placeholder-class="plaClass" -->
							<textarea placeholder-class="textareaClass" auto-height :maxlength="-1"
								:disabled="item.disabled" :placeholder="item.placeholder"
								v-model="form[item.rules.name]" @input="inputVal(index)">
                            </textarea>
						</view>
					</view>
					<!-- 上传图片 -->
					<!-- <view class="textarea-box" v-else-if="item.type === 'file'">
						<view :class="item.rules.verify ? 'line-row' : 'p-l14 line-row'">
							<text class="colorRed" v-if="item.rules.verify">*</text>
							<text class="num" v-if="num">{{ index + 1 }}.</text>
							{{ item.label }}
						</view>
						<view class="img-upload p30">
							<uv-upload :fileList="form[item.rules.name]" :disabled="item.disabled" :accept="item.accept"
								:capture="item.capture" :maxCount="item.maxCount" :sizeType="item.sizeType"
								:compressed="item.compressed" :camera="item.camera" :multiple="item.multiple"
								:maxSize="item.maxSize" :previewImage="item.previewImage" width="150rpx" height="150rpx"
								@afterRead="afterRead($event,item)" @delete="deletePic($event,item)"></uv-upload>
						</view>
					</view> -->

					<!-- 单选框 -->
					<view class="line-col" v-else-if="item.type === 'radio'">
						<view :class="item.rules.verify ? 'line-row' : 'line-row'">
							<text class="colorRed" v-if="item.rules.verify">*</text>
							<text class="num" v-if="num">{{ index + 1 }}.</text>
							{{ item.label }}
						</view>
						<view class="line-bottom-select">
							<uv-radio-group v-model="form[item.rules.name]" @change="radioChange($event, index)"
								placement="column">
								<uv-radio :size="16" :icon-size="12" :label-size="16" shape="circle"
									v-for="(radioItem, radioIndex) in item.list" :key="radioIndex"
									:label="radioItem.label" :name="radioItem.value" :disabled="radioItem.disabled"
									:customStyle="{marginBottom: '24px'}">
								</uv-radio>
							</uv-radio-group>
						</view>
					</view>
					<!-- 多选框 -->
					<view class="line-col" v-else-if="item.type === 'checkbox'">
						<view :class="item.rules.verify ? 'line-row' : 'line-row'">
							<text class="colorRed" v-if="item.rules.verify">*</text>
							<text class="num" v-if="num">{{ index + 1 }}.</text>
							{{ item.label }}
						</view>
						<view class="line-bottom-select pr20">
							<uv-checkbox-group v-model="form[item.rules.name]"
								@change="checkboxGroupChange($event,item)" placement="column">
								<uv-checkbox :size="16" :icon-size="12" :label-size="16"
									v-for="(checkboxItem, checkboxIndex) in item.list" :key="checkboxIndex"
									:label="checkboxItem.label" :disabled="checkboxItem.disabled"
									:name="checkboxItem.value" :customStyle="{marginBottom: '24px'}">
								</uv-checkbox>
							</uv-checkbox-group>
						</view>
					</view>

					<!-- 手机输入框 -->
					<view class="line" v-else-if="item.type === 'mobile'">
						<view :class="item.rules.verify ? 'line-left' : 'line-left'">
							<text class="colorRed" v-if="item.rules.verify">*</text>
							<text class="num" v-if="num">{{ index + 1 }}.</text>
							{{ item.label }}
						</view>
						<view class="line-right pr20">
							<input type="number" v-model="form[item.rules.name]" :placeholder="item.placeholder"
								@input="inputVal(index)" class="input" :disabled="item.disabled" :maxlength="11"
								placeholder-class="plaClass" />
							<!-- <view style="width:280rpx" v-if="item.oneKeyPhone">
								<uv-button size="mini" type="primary" open-type="getPhoneNumber"
									@getphonenumber="getphonenumber" :disabled="item.disabled">一键获取
								</uv-button>
							</view> -->
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import mixins from "./mixins";
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		name: "activeForm",
		mixins: [mixins],
		props: {
			//是否展示序号
			num: {
				type: Boolean,
				default: false,
			},
			value: {
				type: Object,
				default: () => {
					return {};
				},
			},
			formData: {
				type: Array,
				default: () => {
					return [];
				},
			},
			//是否编辑表单
			isEdit: {
				type: Boolean,
				default: false,
			},
			//是否能删除
			isDel: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				submitData: "",
				selectBox: [],
				currentSelectIndex: "",
				currentSelectValue: "",
				codeFont: "获取验证码",
				wait: 60,
				isSend: false,
				form: {}, //form//表单

			};
		},
		computed: {
			// formData: {
			//     get() {
			//         // console.log("this.formData", this.value)
			//         return this.value
			//     },
			//     set(nval) {
			//         this.$emit("input", nval);
			//     }
			// }
		},
		mounted() {
			setTimeout(() => {
				this.dataFormat()
			})
			// 在百度智能云那边创建一个应用后可以获取到下面两个参数 api Key  和  Secret Key
			this.apiKey = 'IC0RTEQFuyeLIXV5X46P8tmw'
			this.SecretKey = 'SOhokQfBoMx1rgFKlPgKabPoyYnAN0uG'
			this.getACSS_TOKEN()
		},
		
		methods: {
			// 开启数量后，按钮控制数量增加
			add(item) {
				item.rules.value++
				this.form[item.rules.name] = item.rules.value
				console.log('增加', item.rules.value)
				this.$emit("input", this.form);
			},
			// 开启数量后，按钮控制数量减少
			reduce(item) {
				if (item.rules.value > 1) {
					item.rules.value--
					this.form[item.rules.name] = item.rules.value
					console.log('减少', item.rules.value)
					this.$emit("input", this.form);
				} else {
					alert("输入值不能少于 1");
				}
			},
			test(item) {
			    console.log('看看', item);
			    let access_token = uni.getStorageSync('access_token');
			    uni.chooseImage({
			        count: 1,
			        sizeType: ['original', 'compressed'],
			        sourceType: ['album'],
			        success: (res) => {
			            let tempFilePaths = res.tempFilePaths[0];
			            pathToBase64(tempFilePaths).then(base64data => {
			                uni.request({
			                    url: '/baiduApi/rest/2.0/ocr/v1/idcard?access_token=' + access_token,
			                    method: 'POST',
			                    data: {
			                        image: base64data,
			                        id_card_side: 'front',
			                    },
			                    header: {
			                        'Content-Type': 'application/x-www-form-urlencoded'
			                    },
			                    success: res => {
			                        console.log('res.data', res);
			                        if (res.data.words_result && res.data.words_result.公民身份号码 && res.data.words_result.公民身份号码.words !== '') {
			                            this.form[item.rules.name] = res.data.words_result.公民身份号码.words;
			                        }
			                    }
			                });
			                uni.request({
			                    url: '/baiduApi/rest/2.0/ocr/v1/hk_macau_taiwan_exitentrypermit?access_token=' + access_token,
			                    method: 'POST',
			                    data: {
			                        image: base64data,
			                        exitentrypermit_type: 'hk_mc_passport_front',
			                    },
			                    header: {
			                        'Content-Type': 'application/x-www-form-urlencoded'
			                    },
			                    success: res => {
			                        console.log('res.data', res.data.words_result);
			                        if (res.data.words_result && res.data.words_result.card_number && res.data.words_result.card_number[0] && res.data.words_result.card_number[0].word !== '') {
			                            this.form[item.rules.name] = res.data.words_result.card_number[0].word;
			                        }
			                    }
			                });
			            });
			        }
			    });
			},
			getACSS_TOKEN() {
				uni.request({
					url: '/baiduApi/oauth/2.0/token',
					method: 'POST',
					data: {
						grant_type: 'client_credentials',
						client_id: this.apiKey, // 在百度智能云那边创建一个应用后可以获取
						client_secret: this.SecretKey // 在百度智能云那边创建一个应用后可以获取
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						uni.setStorageSync('access_token', res.data.access_token)
						//console.log(JSON.parse(res.data))
					}
				});
			},
			getPlaceholderStyle(type) {
				if (type === 'code') {
					return 'text-align: left;';
				}
				if (type === 'document') {
					return 'text-align: left;';
				}
				if (type === 'file') {
					return 'text-align: left;';
				}
				return '';
			},
			//初始化表单
			dataFormat() {
				let formDefault = this.extractRules(this.formData)
				let formValue = this.value
				let form = Object.assign(formDefault, formValue)
				console.log("form", form)
				this.$set(this, 'form', form)
			},
			//提取表单key和value
			extractRules(formData) {
				console.log(formData)
				const extractedRules = {};

				formData.forEach(field => {
					const {
						rules
					} = field;
					if (rules.name) {
						extractedRules[rules.name] = rules.value;
					}
				});

				return extractedRules;
			},
			// 删除图片
			deletePic($event, item) {
				item.rules.value.splice($event.index, 1)
				this.form[item.rules.name] = item.rules.value
				this.$emit('input', this.form)
			},
			// 新增图片
			afterRead($event, item) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				item.rules.value = item.multiple ? $event.file : [$event.file]
				this.form[item.rules.name] = item.rules.value
				this.$emit('input', this.form)
			},
			//显示select
			showSelect(index) {
				this.$refs[`actionSheet${index}`][0].open();
				this.$emit('input', this.form)
				this.$forceUpdate()
			},
			showDateSelect(index) {
				this.$refs[`datetime${index}`][0].open();
				this.$emit('input', this.form)
			},
			//显示日历
			showCalendar(index) {
				this.$refs[`calendar${index}`][0].open();
				this.$emit('input', this.form)
			},
			//input输入框的值传给父组件
			inputVal(index) {
				const data = {
					val: this.formData[index].rules.value,
					index: index,
				};
				if (String(data.val) !== "" && String(data.index) !== "") {
					this.formData[data.index].rules.value = data.val;
				}
				this.$emit("input", this.form);
			},
			// 单选 下拉框点击确定
			selectConfirm($event, item) {
				item.rules.value = $event.value;
				this.form[item.rules.name] = $event.value;
				item.show = false
				this.$emit("input", this.form);
				this.$forceUpdate()
			},
			selectCalendar($event, item) {
				const dateString = $event.reduce((b, n) => (b + `,${n}`))
				console.log("selectCalendar", dateString)
				// item.rules.label = dateString;
				this.form[item.rules.name] = item.rules.value = dateString;
				item.show = false
				this.$emit("input", this.form);
				this.$forceUpdate()
			},
			// value:返回所选时间戳，mode:当前模式
			selectDateTime($event, item) {
				const formatValue = $event.mode === 'time' ? this.formatTime(this.getTimestampFromTime($event.value),
					$event.mode) : this.formatTime($event.value, $event.mode)
				// item.rules.label = formatValue
				this.form[item.rules.name] = item.rules.value = item.returnTimestamp ? ($event.mode === 'time' ? this
					.getTimestampFromTime($event.value) : $event.value) : formatValue; //是否返回时间搓
				item.show = false
				this.$emit("input", this.form);
				this.$forceUpdate()
			},
			// 帮我更具 参数	date为日期选择，time为时间选择，year-month为年月选择 ,datetime日期时间选择 分别把时间搓转换成对应的格式
			formatTime(timestamp, formatType) {
				const date = new Date(timestamp);

				if (isNaN(date)) {
					return "Invalid Date";
				}

				let year = date.getFullYear();
				let month = String(date.getMonth() + 1).padStart(2, "0");
				let day = String(date.getDate()).padStart(2, "0");
				let hours = String(date.getHours()).padStart(2, "0");
				let minutes = String(date.getMinutes()).padStart(2, "0");
				let seconds = String(date.getSeconds()).padStart(2, "0");

				switch (formatType) {
					case "date":
						return `${year}-${month}-${day}`;
					case "time":
						return `${hours}:${minutes}`; //:${seconds}
					case "year-month":
						return `${year}-${month}`;
					case "datetime":
						return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					default:
						return "Invalid Format Type";
				}
			},
			// 根据给定的时间（"11:00"）获取当前日期和指定时间的时间戳
			getTimestampFromTime(inputTime) {
				// 获取当前日期
				const currentDate = new Date();

				// 将输入时间字符串拆分成小时和分钟
				const [hours, minutes] = inputTime.split(':');

				// 创建一个新日期对象，设置时间为输入的小时和分钟
				const targetDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(),
					hours, minutes);

				// 获取时间戳
				const timestamp = targetDate.getTime();

				return timestamp;
			},
			selectClose(item) {
				item.show = false;
				this.$forceUpdate()
			},
			//单选 点击触发
			radioChange($event, index) {
				this.$emit("input", this.form);
			},
			//复选框 点击触发
			checkboxGroupChange($event, item) {
				console.log("$event", $event)
				const selectArr = item.list.filter((v => ($event.includes(v.value)))) //过滤
				console.log("selectArr", selectArr)
				this.form[item.rules.name] = item.rules.value = selectArr.map(v => (v.value))
				this.$emit("input", this.form);
			},

			// 发送验证码
			sendCode(item) {
				let setTime = 0;
				this.sendCodeCallback(item)
				if (!this.isSend) {
					this.isSend = true;
					setTime = setInterval(() => {
						this.wait--;

						this.codeFont = this.wait + "重新发送";
						if (this.wait === 0) {
							clearInterval(setTime);
							this.codeFont = "获取验证码";
							this.isSend = false;
							this.wait = 60;

						}
					}, 1000);
				}
			},
			//校验
			vervify() {
				return new Promise((resolve, reject) => {
					this.formData.forEach((item) => {
						if (item.rules.verify) {
							switch (item.type) {
								case "checkbox":
									if (this.form[item.rules.name].length === 0) {
										uni.showToast({
											title: item.rules.errMess || "请选择" + item.label,
											duration: 2000,
											icon: "none",
										});

										throw Error(); //终止函数
									}
									break;
								case "file":
									if (this.form[item.rules.name].length === 0) {
										uni.showToast({
											title: item.rules.errMess || "请选择" + item.label,
											duration: 2000,
											icon: "none",
										});

										throw Error(); //终止函数
									}
									break;
								case "document":
									if (this.form[item.rules.name].length === 0) {
										uni.showToast({
											title: item.rules.errMess || "请选择" + item.label,
											duration: 2000,
											icon: "none",
										});

										throw Error(); //终止函数
									}

									if (this.form[item.rules.name].length !== 9 && this.form[item.rules
											.name].length !== 18) {
										uni.showToast({
											title: "证件格式错误",
											duration: 2000,
											icon: "none",
										});
										throw Error(); //终止函数
									} else {
										if (this.form[item.rules.name].length === 9) {
											if (!/^[HMhm]{1}([0-9]{10}|[0-9]{8})$/.test(this.form[item
													.rules.name])) {
												uni.showToast({
													title: "港澳通行证格式错误",
													duration: 2000,
													icon: "none",
												});
												throw Error(); //终止函数
											}
										} else if (this.form[item.rules.name].length === 18) {
											if (!
												/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
												.test(this.form[item.rules.name])) {
												uni.showToast({
													title: "身份证格式错误",
													duration: 2000,
													icon: "none",
												});
												throw Error(); //终止函数
											}
										}
									}
									break;
								case "mobile":
									if (!this.form[item.rules.name]) {
										uni.showToast({
											title: "手机号不能为空",
											duration: 2000,
											icon: "none",
										});

										throw Error(); //终止函数
									}
									if (!/^\s{0}$|^1\d{10}$/.test(this.form[item.rules.name])) {
										uni.showToast({
											title: "手机格式错误",
											duration: 2000,
											icon: "none",
										});

										throw Error(); //终止函数
									}
									break;
								default:
									if (!this.form[item.rules.name]) {
										uni.showToast({
											title: item.rules.errMess || item.label + "不能为空",
											duration: 2000,
											icon: "none",
										});

										throw Error(); //终止函数
									}
									if (item.rules.regexp && !(new RegExp(item.rules.regexp).test(this
											.form[item.rules.name]))) {
										uni.showToast({
											title: item.label + "格式不正确",
											duration: 2000,
											icon: "none",
										});

										throw Error(); //终止函数
									}
									break;
							}
						}
					});
					resolve(this.form)
				})

			},
			//重置表单
			resetForm() {
				for (let key in this.form) {
					if (this.form.hasOwnProperty(key)) {
						switch (typeof this.form[key]) {
							case "object":
								this.form[key] = []
								break
							case "number":
								this.form[key] = ''
								break
							case "string":
								this.form[key] = ''
								break
						}

					}
				}
				this.$emit("input", this.form);
			}
			// 提交序列化的表单
			// $submitForm() {
			//     const formData = this.formData
			//     console.log("formData :>> ", formData);
			//     let submitData = {};
			//     for (let i = 0; i < formData.length; i++) {
			//         if (formData[i].type === 'file') {
			//             submitData[formData[i].rules.name] = formData[i].rules.fileList;
			//             continue;
			//         }
			//         submitData[formData[i].rules.name] = formData[i].rules.value;
			//     }
			//     return submitData;
			// }
		},
	};
</script>

<style lang="scss" scoped>
	.active-form {
		min-height: 200px;

		.plaClass {
			text-align: right;
			font-size: 16px;
			color: #c0c4cc;
		}

		.textareaClass {
			font-size: 16px;
			color: #c0c4cc;
		}

		.input-placeholder {
			display: flex;
			justify-content: flex-end;
			font-size: 16px;
			color: #c0c4cc;
		}

		.form-box {
			width: 100%;
			box-sizing: border-box;
		}

		.colorRed {
			color: red;
			padding: 0 10rpx;
			margin-left: -32rpx;
		}

		.line-row {
			display: flex;
			width: 100%;
			align-items: center;
			height: 100%;
			letter-spacing: 0.5px;
			font-size: 16px;
			color: #000000;
			box-sizing: border-box;
		}

		.line-right {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			position: relative;
		}

		.line-bottom-select {
			padding-top: 24px;
		}

		.line-bottom-textarea {
			padding-top: 20rpx;

			textarea {
				min-height: 100rpx;
			}
		}

		.line-left {
			display: flex;
			// width: 100px;
			align-items: center;
			height: 100%;
			letter-spacing: 0.5px;
			font-size: 16px;
			color: #000000;
			box-sizing: border-box;
		}

		.p-l14 {
			padding-left: 6rpx;
		}

		/deep/ uni-textarea {
			width: 96%;
			padding: 9px 2%;
			line-height: 1.6;
			font-size: 14px;
			height: 75px;
		}

		.textarea-box {
			width: 100%;
			border-bottom: 1px solid #ededed;
			padding-top: 24px;
			padding-bottom: 24px;
			font-size: 16px;

			textarea {
				padding-left: 6px;
				height: 60px;
				font-size: 16px;
				color: #333;
			}

		}

		.line {
			padding: 27rpx 0;
			display: flex;
			align-items: center;
			width: 100%;
			margin: 0 auto;
			border-bottom: 1px solid #ededed;

			.code-text {
				text-align: left !important;
			}

			.input {
				height: 100%;
				width: 100%;
				text-align: right;
				font-size: 16px;
				color: #333;
				border: none;
				overflow: hidden;
				text-overflow: ellipsis;
				outline: none;
			}
		}

		.line-col {
			padding: 24px 0 0;
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 0 auto;
			border-bottom: 1px solid #ededed;

			.input {
				padding-right: 20rpx;
				height: 100%;
				width: 100%;
				text-align: left;
				font-size: 28rpx;
				color: #333;
				border: none;
				overflow: hidden;
				text-overflow: ellipsis;
				outline: none;
			}
		}

		.num {
			margin-right: 8rpx;
		}
	}
</style>